<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$theme['title']}-选择课程</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{TEST_STATIC_PATH}new_beilai/css/reset.css">
    <link rel="stylesheet" type="text/css" href="{TEST_STATIC_PATH}new_beilai/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="{TEST_STATIC_PATH}new_beilai/css/style.css?v=1">
    <script src="{TEST_STATIC_PATH}new_beilai/js/screen.js"></script>
    <script src="{TEST_STATIC_PATH}new_beilai/js/jquery.js"></script>
    <script src="{TEST_STATIC_PATH}new_beilai/js/swiper.min.js"></script>
    <script src="{$_G['URL']['LOTTERY_CSS']}lottery/js/layer/layer.js"></script>
    <style>
        .lessonFooter{
            height: 1rem;
            padding-top: 0;
        }
        .lessonFooter a.nextStep{
            line-height: .7rem;
            margin-top: .14rem;
            background: linear-gradient(90deg, {$config['formcolorhead']} 15.44%, {$config['formcolortop']} 90.59%);
        }
    </style>
</head>
<body class="grayBox">
<div class="lessonList">
    <ul>
        {loop $course_list $key $item}
        <div class="lesson-item">
            <div class="lesson-item-top">
                <li data-k="{$key}" data-courseid="{$item['id']}" data-shangjia_id="{$item['shangjia_id']}">
                    <div class="choseImg ">
                        <img src="{$item['top_img']}" >
                    </div>
                    <div class="choseTxt">
                        <h2>{$item['name']}</h2>
                        <h3>机构：{$item['shangjia_name']}</h3>
                        <p>
                            已购：{$item['selected_num']}
                            <span>¥<b>{$item['price']}</b></span>
                        </p>
                    </div>
                </li>
            </div>
            <div class="choseAdd">
                <h2>请选择上课校区<span class="closeAdd"></span></h2>
                <ul>
                    {loop $item['address'] $address_item}
                    <li>{$address_item}</li>
                    {/loop}
                </ul>
                <div class="sureAdd">
                    <a class="confirm">确定</a>
                </div>
            </div>
        </div>
        {/loop}
    </ul>
</div>
<div id="screen"></div>
<!--选择校区-->
<div style="margin-top: 60px"></div>
<div class="lessonFooter">
<!--    <span class="allChose">全选</span>-->
    <a href="javascript:goNext()" class="nextStep" style="color: {$config['formcolorcentertext']}">下一步</a>
    <p>已选<span class="num">0</span>个</p>
</div>
</body>
<script>
    function getSjItem(data,sj_id){
        let sj = {};
        $.each(data,function (ii,val) {
            if (val.shangjia_id == sj_id){
                sj = val;
                return sj;
            }
        });
        return sj;
    }
</script>
<script type="text/javascript">
    let course_min_num="{$course_min_num}";
    let course_max_num="{$course_max_num}";
    let show_shangjia_data= '{$show_shangjia_data}';
    show_shangjia_data = JSON.parse(show_shangjia_data);
    $('.lesson-item-top li').click(function(){
        if($(this).hasClass('cur')){
            $(this).removeClass('cur')
        }else{
            $(this).addClass('cur');
            // $('.choseAdd,#screen').fadeIn();
        }
        var item_key = $(this).data("k");
        let shangjia_id=$(this).data("shangjia_id");

        let index=$(".lessonList ul .lesson-item-top li").index(this);
        let length=$(".lessonList ul .cur").length;
        let tmp_selected_shangjia_course = 0;
        //判断课程可选最大数
        if (length>course_max_num){
            let tmp_msg = '最多选择'+course_max_num+'个课程';
            layer.msg(tmp_msg);
            $(this).removeClass('cur');
            return;
        }
        //获取当前的商家信息
        let shangjia_item = getSjItem(show_shangjia_data,shangjia_id);
        //判断商家可选课程数
        if (shangjia_item.course_max>0){
            let tmp_shangjia_cheked_num = 0;
            for (let i=0;i<length;i++){
                if (shangjia_id==$(".lessonList ul .lesson-item-top li.cur").eq(i).data("shangjia_id")){
                    tmp_shangjia_cheked_num+=1;
                    if(index == $(".lessonList ul .lesson-item-top li").index($(".lessonList ul .lesson-item-top li.cur").eq(i))) continue;
                    if (tmp_shangjia_cheked_num>=shangjia_item.course_max){
                        let tmp_msg = '当前商家最多选择'+shangjia_item.course_max+'个{$course_other_name}';
                        layer.msg(tmp_msg);
                        $(this).removeClass('cur');
                        return;
                    }
                }
            }
        }

        $('.lessonFooter .num').html($(".lessonList ul .lesson-item-top li.cur").length);
        if(!$(this).hasClass('cur')) {
            $('.choseAdd').eq(index).find('.checked').removeClass('checked');
            return;
        }
        if($('.choseAdd').eq(index).find('li').length > 1) {
            $('#screen').fadeIn();
            $('.choseAdd').eq(index).fadeIn();
        } else {
            $('.choseAdd').eq(index).find('li').addClass('checked');
        }
        $('.lessonFooter .num').html($(".lessonList ul .lesson-item-top li.cur").length);

    })
    //关闭弹窗
    $('.closeAdd').click(function(){
        if($('.choseAdd').eq($('.closeAdd').index($(this))).find('li.checked').length <=0) {
            $(".lessonList ul .lesson-item-top li").eq($('.closeAdd').index($(this))).removeClass('cur');
        }
        $('#screen').fadeOut();
        $(this).parents('.choseAdd').fadeOut();
    })
    //地区选择
    $('.choseAdd li').click(function(){
        $(this).addClass('checked').siblings().removeClass('checked')
    })
    $('.choseAdd .confirm').click(function () {
        if($('.choseAdd').eq($('.choseAdd .confirm').index($(this))).find('li.checked').length <= 0) {
            $(".lessonList ul .lesson-item-top li").eq($('.choseAdd .confirm').index($(this))).removeClass('cur');
        }
        $('#screen').fadeOut();
        $(this).parents('.choseAdd').fadeOut();
    })
    //全选
    $('.allChose').click(function(){
        if($(this).hasClass('on')){
            $(this).removeClass('on')
            $('.lessonList li').removeClass('cur')
        }else{
            $(this).addClass('on');
            $('.lessonList li').addClass('cur')
        }
    })
    function goNext() {
        let length = $(".lessonList ul .lesson-item-top li.cur").length;
        if(length < course_min_num) {
            layer.msg(`最少选择${course_min_num}个`);
            return;
        }
        if(length > course_max_num) {
            layer.msg(`最多选择${course_max_num}个`);
            return;
        }
        let arr = [];
        for (let i = 0; i < length; i++) {
            let shangjia_id = $(".lessonList ul .lesson-item-top li.cur").eq(i).data('shangjia_id');
            let courseid = $(".lessonList ul .lesson-item-top li.cur").eq(i).data('courseid');
            let index = $(".lessonList ul .lesson-item-top li").index($(".lessonList ul .lesson-item-top li.cur").eq(i));
            let address = $('.choseAdd').eq(index).find('li.checked').html();
            let top_img = $('.lessonList .lesson-item .choseImg img').eq(index).attr('src');
            let name  = $('.lessonList .lesson-item .choseTxt h2').eq(index).html();
            let shangjia_name = $('.lessonList .lesson-item .choseTxt h3').eq(index).html();
            arr.push({
                shangjia_id, courseid, address, top_img, name, shangjia_name
            })
        }
        let courseStr = JSON.stringify(arr);
        localStorage.setItem('course_address', courseStr);
        let url=`/{php echo createMobileUrl('wx', array('themeid'=>$themeid,'r'=>'education.index.gift','from'=>'mobile','joinid'=>$joinid,'recordid'=>$recordid));}`;
        window.location.href = url;
    }
</script>

</html>
